<template>
  <div class="vue-box">
    <div class="c-panel">
      <el-tabs>
        <el-header>
          <el-button size="medium" type="primary" @click="goback">返回</el-button>
<!--          <el-button size="medium" type="warning" @click="toggleEditor" >开始编辑</el-button>-->
<!--          <el-button size="medium" type="success" @click="tijiao">确认编辑</el-button>-->

        </el-header>
        <hr style="margin-bottom: 20px"/>
        <div id="container"></div>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {

  data() {
    return {
      map: null,
      firstcenter: [],
      center: [], // 圆心
      radius: 1000, // 半径，单位：米
      circle: null,
      editor: null,
      isEditing: false,
      mapdata: {}
    }
  },
  created() {
    this.mapdata = this.$route.query.mapdata;
    this.firstcenter.push(this.mapdata.longitude)
    this.firstcenter.push(this.mapdata.latitude)
    this.center = JSON.parse(JSON.stringify(this.firstcenter));

  },
  mounted() {
    this.initMap();
    window._AMapSecurityConfig = {
      securityJsCode: 'aa26195143721cc58d20294c8e672ed8' // 申请key对应的秘钥
    }
  },
  methods: {
    initMap() {
      AMapLoader.reset();
      AMapLoader.load({
        key: '107b7f4763513ea26105a82ea6820c5c',             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0',      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Circle', 'AMap.CircleEditor'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('container', {  //设置地图容器id
          // viewMode:"3D",    //是否为3D地图模式
          zoom: 14,        //初始化地图级别
          center: this.center, //初始化地图中心点位置
        });
        // 创建 Circle
        this.circle = new AMap.Circle({
          center: this.center,
          radius: this.radius,
          borderWeight: 2,
          strokeColor: '#FF33FF',
          strokeOpacity: 0.2,
          fillColor: '#1791fc',
          fillOpacity: 0.35,
          zIndex: 10,
        })
        this.circle.setMap(this.map)
        // 添加圆形编辑器
        this.editor = new AMap.CircleEditor(this.map, this.circle)
        this.editor.on('move', this.onEditorMove)
        this.editor.on('adjust',this.onEditorMove)

      }).catch(e => {
        console.log(e);
      })
    },
    toggleEditor() {
      // 切换编辑状态
      this.isEditing = !this.isEditing;
      this.editor.open()
      // if (this.isEditing) {
      //   this.editor.open()
      // } else {
      //   this.editor.close()
      // }
    },
    onEditorMove() {
      // 圆形编辑器移动时，更新圆的中心点和半径
      this.center = this.circle.getCenter()
      this.radius = this.circle.getRadius()
    },
    //返回
    goback() {
      window.history.back();
    },
    //刷新
    refresh() {
      //console.log(this.firstcenter)
     // this.center = JSON.parse(JSON.stringify(this.firstcenter));
    },
    //确认编辑
    tijiao(){
      this.isEditing = !this.isEditing
      this.editor.close()
      console.log("圆心:"+this.center);
      console.log("半径:"+this.radius);
    },
    onEditor(){
      console.log("触发事件")
    }
  }

}
</script>
<style>
.vue-box {
  height: 100%;
  overflow: hidden;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>
